<template>
	<view class="main">
		<view class="bg">
			<image src="../../../static/images/login_bg.png" mode=""></image>
		</view>
		<!-- <u-navbar :is-back="true" title="登陆普通账户" :background="background" back-icon-color="#fff" title-color="#fff"></u-navbar> -->
		<view class="form">
			<view class="title">
				登陆
			</view>
			<view class="title_2">
				开启你的数字藏品之旅
			</view>
			<view class="inputs">
				<input type="text" placeholder="请输入手机号" v-model="phone" />
			</view>
			<view class="inputs">
				<input type="password" placeholder="请输入密码" v-model="pwd" />
			</view>
			<view class="forget">
				<text @click="router('../register/register')">注册</text>
				<text @click="router('../forget/forget')">忘记密码</text>
			</view>
			<!-- 		<view class="nav">
				<navigator url="../forget/forget">找回密码</navigator>
			</view> -->
			<view class="btn" @click="handlogin">
				登录
			</view>

			<view class="bot">
				<view class="chose" @click="changed">
					<image :src="change?'../../../static/images/chosed.png':'../../../static/images/chose.png'"
						mode="aspectFit"></image>
				</view>
				<view class="read">
					<text class="no">我已阅读并同意</text><text class="have"
						@click="router('../../users/agreement/agreement')">《用户协议》</text><text
						class="no">和</text><text class="have"
						@click="router('../../users/privacy/privacy')">《隐私政策》</text>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				phone: '',
				pwd: '',
				background: {
					backgroundColor: '#E93133',
				},
				change: false,

			};
		},
		methods: {
			changed() {
				this.change = !this.change
				console.log(this.change);
			},
			//跳转到注册
			router(path) {
				console.log(222);
				uni.navigateTo({
					url: path
				})
			},
			handlogin() {
				if(this.change==true){
					console.log(this.phone);
					console.log(this.pwd);
					global.$http.request({
						url: '/api/login/index',
						data: {
							phone: this.phone,
							pwd: this.pwd
						}
					}).then(res => {
					
						console.log(res);
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								icon: "none",
								mask: true,
								duration: 1000
							})
							uni.setStorageSync('token', res.data.data.token)
							uni.setStorageSync('userinfo', res.data.data)
							setTimeout(function() {
								uni.switchTab({
									url: '../../indexs/index/index'
								}), 2000
							})
						}
					})
				}else{
					uni.showToast({
						title: '请勾选下方协议',
						icon: "none",
						mask: true,
						duration: 1000
					})
				}
			
			}
		}
	}
</script>

<style lang="scss">
	page {
		input {
			outline: none;
		}


		background-color: #181818;

		.main {
			width: 750rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.bg {
				position: absolute;
				top: 0;
				z-index: -1;

				image {
					width: 750rpx;
					height: 1624rpx;
				}
			}

			.form {
				padding: 256rpx 0 0 72rpx;
				width: 750rpx;
				height: 750rpx;
				font-family: PingFang SC-Regular, PingFang SC;

				// margin-top: 40%;
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				.title {
					font-size: 60rpx;
					font-weight: 400;
					color: #FFFFFF;

				}

				.title_2 {
					padding: 16rpx 0 120rpx 0;
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;

				}

				.inputs {
					width: 606rpx;
					height: 92rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					opacity: 0.5;
					border: 2rpx solid #F3C860;
					margin-bottom: 32rpx;

					input {
						padding: 20rpx 0 24rpx 32rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #FFFFFF;
					}

				}

				// .inputs input:focus{
				// 	font-size: 50rpx !important;
				// 	background-color: #fff;
				// }

				// input::focus {
				// 	width: 606rpx;
				// 	height: 92rpx;
				// 	border-radius: 12rpx 12rpx 12rpx 12rpx;
				// 	opacity: 1;
				// 	border: 2rpx solid #F3C860;
				// }


				.forget {
					padding: 0 72rpx 32rpx 0;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #F3C860;

					text {}
				}

				.nav {
					width: 400rpx;
					margin-top: 20rpx;
					display: flex;
					flex-direction: row-reverse;
					font-size: 26rpx;
					color: #808080;
				}

				.btn {
					width: 606rpx;
					height: 92rpx;
					text-align: center;
					line-height: 92rpx;
					background: #F3C860;
					border-radius: 46rpx 46rpx 46rpx 46rpx;
					opacity: 1;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;

				}

				.bot {
					display: flex;
					// align-items: center;
					padding: 48rpx 0 0 30rpx;

					.chose {
						padding-right: 8rpx;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}

					.read {
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
						opacity: 1;

						.no {
							opacity: 0.5;
						}

						.have {
							opacity: 1;
						}
					}
				}
			}
		}

	}
</style>
